<template>
	<div id="Complete">
		<!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label>
				<el-input v-model="formInline.user" placeholder="搜索关键词"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form> -->
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>已完成</span>
			</div>
			<el-table
					:data="tableData"
					style="width: 100%;margin-bottom: 20px;"
					row-key="WorkID"
					default-expand-all
					:row-class-name="tableRowClassName"
					:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column
						prop="Title"
						label="标题"
						fixed width="350">
					<template slot-scope="scope">
						<span v-if="scope.row.type!=null">{{scope.row.Title}}</span>
						<span v-else><el-link  :underline="false" @click="sikpMyflow(scope.row)">{{scope.row.Title}}</el-link></span>
					</template>

				</el-table-column>
				<el-table-column
						prop="StarterName"
						label="发起人"
						width="80">
				</el-table-column>
				<el-table-column
						prop="DeptName"
						label="发起部门"
						width="150">
				</el-table-column>
				<el-table-column
						prop="FlowName"
						label="流程类型"
						width="150">
				</el-table-column>
				<el-table-column
						prop="RDT"
						label="发起时间"
						width="160">
				</el-table-column>
				<el-table-column
						prop="SendDT"
						label="完成时间"
						width="160">
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button v-show="scope.row.type==null" @click="DialogOpen(scope.row)" type="text" size="small">轨迹</el-button>
					</template>
				</el-table-column>

			</el-table>
		</el-card>
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[5,10,15,20]"
				:page-size="pageSize"
				layout="total,sizes, prev, pager, next"
				:total="total">
		</el-pagination>
		<el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose">
			<trackBox></trackBox>
		</el-dialog>
	</div>
</template>

<script>
	import trackBox from './components/track.vue' // 轨迹
export default {
	name: "Runing",
	components: {
		trackBox,
	},

	data() {
		return {
			title: "已完成",
			data: {},
			dialogFormVisible:false,//弹出框显示
			titile:'',//标题
			formInline: { //查询条件
				user: "",
				region: ""
			},
			tableData: [],
			total: 0, // 总数
			currentPage: 1, // 当前页
			pageSize:5//一页显示的行数
		};
	},

	beforeCreate() {},

	created() {
		this.loadData();
	},

	methods: {
		tableRowClassName({row}) {
			if (row.type === null)
				return '';

			if (row.type === 1) {
				return 'success-row';
			}
			return '';
		},
		// 获取数据
		loadData() {
			let handler = new this.HttpHandler("BP.WF.HttpHandler.WF");
			let data = handler.DoMethodReturnString("Complete_Init");
			if(data.indexOf("err@")!=-1){
				this.$message.error(data);
				console.log(data);
				return;
			}
			this.data = JSON.parse(data);
			this.total = this.data.length;
			this.paging();

		},

		// 分页
		paging() {
			let start = (this.currentPage - 1) * this.pageSize;
			let end = this.currentPage * this.pageSize;
			let arr = this.data.slice(start, end);
			this.filterData(arr);
		},

		// 过滤数据
		filterData(data) {
			this.tableData=[];
			var flowNos="";
			data.forEach(item => {
				if(flowNos.indexOf(item.FK_Flow+",")==-1){
					this.tableData.push({
						Title:item.FlowName,
						WorkID:parseInt(item.FK_Flow),
						type:1,//流程
						children:this.GetChildren(item.FK_Flow,data)
					});
					flowNos+=item.FK_Flow+",";
				}

			});

			console.log(this.tableData);
		},GetChildren(flowNo,gwfs){
			var data=[];
			gwfs.forEach(item => {
				if(item.FK_Flow==flowNo){
					if (item.TodoEmps.indexOf(',') != -1)
						item.TodoEmps = item.TodoEmps.substring(item.TodoEmps.indexOf(',') + 1);
					data.push(item);
				}

			});
			return data;
		},

		// 查询
		onSubmit() {},
		handleSizeChange(val) {
			this.pageSize = val;
			this.currentPage=1;
			this.paging();
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.paging();
			console.log(`当前页: ${val}`);
		},
		//跳转到jflow页面
		sikpMyflow(work){
			let params = {};
			params.WorkID = work.WorkID;
			params.FK_Flow = work.FK_Flow;
			params.FK_Node = work.FK_Node;
			params.FID = work.FID;
			params.FromPage = 'Complete';
			console.log(params);
			this.$router.push({name:"myView",params});

		},
		DialogOpen:function(rowData){
			this.$store.commit('setData', rowData);
			// 如果是轨迹图 先请求接口
			this.title="查看轨迹图";
			this.dialogFormVisible = true;
			this.judgeOperation = "track";

		},
		//关闭
		handleClose(){
			this.dialogFormVisible = false;
			this.judgeOperation = '';
		}
	},

	//监听
	computed: {},

	//监听后执行动作
	watch: {}
};
</script>

<style lang="less" scoped>
/deep/ .el-collapse {
	border: none;
}
/deep/ .el-collapse-item__wrap {
	border: none;
}
/deep/ .el-pagination {
	text-align: right;
	margin: 20px 0;
}
</style>